<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片切换</title>
    <style>
        body,html{
            width:100%;
            height:100%;
            margin: 0;
        }
        section.img{
            width:600px;
            height:600px;
            background: #ccc;
            border:1px solid red;
            position: relative;
            left:calc((100% - 600px)/2);
            text-align: center;
        }
        section.img img{
            width: 600px;
            height:600px;
        }
        .btn1{
            display: inline-block;
            width: 40px;
            height:40px;
            background: rgba(0,0,0,0.7);
            text-align: center;
            line-height: 40px;
            color: #fff;
            position: absolute;
            top: calc((600px - 40px)/2);
            cursor: pointer;
            font-size: 28px;
        }
        #prev{
            left: 0;
        }
        #next{
            right: 0;
        }
        .btn1:hover{
            background: rgba(0,0,0,0.4);
        }
        .tip,.num{
            position: absolute;
            background: rgba(0,0,0,0.7);
            width:100%;
            margin: 0;
            color: #fff;
            padding: 10px 0;
        }
        .tip{
            bottom: 0;
        }
        .num{
            top: 0;
        }
        .loading{
            position: absolute;
            width:100%;
            height:100%;
            left:0;
            top: 0;
            background: #000;
            color: #fff;
        }
        .btn2{
            display: inline-block;
            width:100px;
            height:30px;
            background: #ccc;
            line-height: 30px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <section class="img">
        <img src="./img/timg%20(1).jpg" alt="">
        <span id="prev" class=" btn1"><</span>
        <span id="next" class=" btn1">></span>
        <p class="tip">环境</p>
        <p class="num">1/4</p>
        <div class="loading">
           <p>加载中</p>
        </div>
        <div>
            <span id="xh" class="btn2">循环</span>
            <span id="sx" class="btn2">顺序</span>
        </div>
    </section>



    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script src="./js/preload.js"></script>
    <script>
        var imgs=[
            "./img/timg (1).jpg",
            "./img/timg (2).jpg",
            "./img/timg (3).jpg",
            "./img/timg (4).jpg",
            "./img/timg (5).jpg",
            "./img/timg (6).jpg",
            "./img/timg (7).jpg",
            "./img/timg (8).jpg",
            "./img/timg (9).jpg"
        ];
        var fonts=[
            "图1",
            "图2",
            "图3",
            "图4",
            "图5",
            "图6",
            "图7",
            "图8",
            "图9"
        ];
        $.preload(imgs, {
            order: 'unordered',//无序加载
            each: function (count) {//遍历
                $(".loading p").text(Math.round((count+1)/imgs.length*100)+"%")//加载loading的%【当前下标+1 / 图片总数 + %】（因下标是从0开始计；而图片总数是从1开始）
            },
            all: function () {//完成
                $(".loading").hide();
            }
        });

        $(function () {

            var num=0;
            var btn2=true;
            $(".btn2").click(function () {

                if("xh"==$(this).attr("id")){
                    btn2=true;
                }else {
                    btn2=false;
                }
            })


            $(".num").text((num+1)+"/"+imgs.length);
            $(".tip").text(fonts[num]);
            $(".btn1").click(function () {
                if("next"==$(this).attr("id")){
                    if(btn2){
                        (num>=imgs.length-1)?num=0:++num;
                    }else {
                        num=Math.min(imgs.length-1,++num);
                    }
                    btnShow();
                }else{
                    if(btn2){
                        (num<=0)?  num=imgs.length-1: --num;
                    }else {
                        num=Math.max(0,--num);
                    }
                    btnShow();
                }
            })
            function btnShow() {
                $("img").attr("src",imgs[num]);
                $(".num").text((num+1)+"/"+imgs.length);
                $(".tip").text(fonts[num]);
            }
        })
    </script>
</body>
</html>